<template>
  <div class="order">
    <div class="order-header">
      <div class="order-header-num">
        <p>订单号：{{ item.num }}</p>
      </div>
      <div class="order-header-status">
        <p v-if="item.status == '1'">等待支付</p>
        <p v-if="item.status == '2'">等待收货</p>
        <p v-if="item.status == '3'">等待评价</p>
      </div>
    </div>
    <div class="order-body">
      <van-card :num="item.num" :price="item.price" :desc="item.descs" :title="item.title"
        :thumb="item.image" />
    </div>
    <div class="order-footer">
      <div class="order-footer-text">
        <p>数量</p>
      </div>
      <div class="order-footer-num">
        <p>共{{ item.ordernum }}件 <span class="iconfont icon-jiantouyou"></span></p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"

const statusNum = ref("1")

interface IItem{
  id:number,
  descs:string,
  image:string,
  num:string,
  ordernum:string,
  price:string,
  status:string,
  title:string,
  totalnum:string
}

const props = defineProps<{item:IItem}>()

</script>
<style lang="less" scoped>

.order{
  background-color: #fff;
  margin-top: 5px;
  .order-header{
    display: flex;
    padding: 10px;
    .order-header-num{
      flex:1;
      p{
        text-align: left;
        font-size: 12px;
      }
    }
    .order-header-status{
      flex: 1;
      text-align: right;
      p{
        font-size: 12px;
        color: #ff4444;
      }
    }
  }
  .order-body{
    background: #fff;
  }
  .order-footer{
    display: flex;
    padding: 10px;
    .order-footer-text{
      flex:1;
      font-size: 14px;
    }
    .order-footer-num{
      flex:1;
      font-size: 14px;
      text-align: right;
      span{
        font-size: 12px;
      }
    }
  }
}

</style>
